<template>
  <div id="contain">
    <div class="top">
      <span><i class="el-icon-user"></i> 管理员</span>
      <span style="float: right; color: #f56c6c" @click="logout"
        ><i class="el-icon-switch-button"></i> 退出登录</span
      >
    </div>
    <el-row>
      <el-col :span="5">
        <div class="left1">
          <el-menu
            background-color="#545c64"
            default-active="1"
            class="el-menu-vertical-demo"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span slot="title">信息管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">用户信息管理</el-menu-item>
                <el-menu-item index="1-2">景点信息管理</el-menu-item>
                <el-menu-item index="1-3">酒店信息管理</el-menu-item>
                <el-menu-item index="1-4">线路信息管理</el-menu-item>
                <el-menu-item index="1-5">攻略信息管理</el-menu-item>
                <el-menu-item index="1-6">广告信息管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-edit-outline"></i>
                <span slot="title">申请处理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">景点申请</el-menu-item>
                <el-menu-item index="2-2">酒店申请</el-menu-item>
                <el-menu-item index="2-3">线路申请</el-menu-item>
                <el-menu-item index="2-5">广告申请</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="3">
              <i class="el-icon-notebook-1"></i>
              <span slot="title">发布景点</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-s-opportunity"></i>
              <span slot="title">意见反馈</span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-setting"></i>
              <span slot="title">系统设置</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="19">
        <UsersInfo v-show="activeIndex === '1-1'"></UsersInfo>
        <Jdinfo v-show="activeIndex === '1-2'" />
        <hotelinfo v-show="activeIndex === '1-3'" />
        <xianluinfo v-show="activeIndex === '1-4'" />
        <Gonglueinfo v-show="activeIndex === '1-5'" />
        <guanggaoInfo v-show="activeIndex === '1-6'" />

        <Sqdeal v-show="activeIndex === '2-1'" />
        <sqhotel v-show="activeIndex === '2-2'" />
        <sqXianlu v-show="activeIndex === '2-3'" />
        <!-- <sqgonglue v-show="activeIndex === '2-4'" /> -->
        <sqguangao v-show="activeIndex === '2-5'" />

        <PushJd v-if="activeIndex === '3'" />
        <yijian v-if="activeIndex === '4'" />
        <shezhi v-if="activeIndex === '5'"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PushJd from "@/views/Business/PushJd.vue";
import UsersInfo from "@/views/Manage/UsersInfo.vue";
import Jdinfo from "@/views/Manage/Jdinfo.vue";
import Sqdeal from "@/views/Manage/Sqdeal.vue";
import sqhotel from "@/views/Manage/sqhotel.vue";
import sqXianlu from "@/views/Manage/sqXianlu.vue";
import yijian from "@/views/Manage/yijian.vue";
import Gonglueinfo from "@/views/Manage/Gonglueinfo.vue";
import sqguangao from "@/views/Manage/sqguangao.vue";
import guanggaoInfo from "@/views/Manage/guanggaoInfo.vue";
import xianluinfo from "@/views/Manage/xianluinfo.vue";
import hotelinfo from "@/views/Manage/hotelinfo.vue";
import shezhi from "@/views/Manage/shezhi.vue";
export default {
  components: {
    UsersInfo,
    Jdinfo,
    Sqdeal,
    PushJd,
    sqhotel,
    sqXianlu,
    yijian,
    Gonglueinfo,
    sqguangao,
    guanggaoInfo,
    xianluinfo,
    hotelinfo,
    shezhi
  },
  data() {
    return {
      activeIndex: "1-1",
    };
  },
  mounted() {
  },
  methods: {
    async logout() {
      this.$confirm("确认退出?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
         window.localStorage.removeItem("token");
              this.$message({
                type: "success",
                message: "退出成功!",
              });
              this.$router.push("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    handleSelect(key) {
      this.activeIndex = key;
      // console.log(this.activeIndex);
    },
  },
};
</script>
<style  scoped>
#contain {
  width: 1200px;
  margin: 0 auto;
}
.top {
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  padding: 20px;
  cursor: pointer;
}
.left1 {
  background-color: #545c64;
  height: 93vh;
}
</style>>
